<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title></title>
    <script src="js/mui.min.js"></script>
    <link href="css/mui.min.css" rel="stylesheet"/>
    <script type="text/javascript" charset="UTF-8">
      	mui.init();
    </script>
</head>
<body>
	<header class="mui-bar mui-bar-nav">
	    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
	    <h1 class="mui-title">FAB Diameter Calculation</h1>
	     <a class='mui-pull-right' href="" id="exit"><span class="mui-icon mui-icon-close"></span></a>
	</header>
	<div class="mui-content">
		<div class="mui-content-padded">
		<h5 class="mui-content-padded" style="margin-top: 2%;">你可以自己输入Cap的关键参数以及线径</h5>
		<a href="knowleg.html" style="font-size: 14px;">不懂?戳这里!</a>
			<div>
				<label>CD</label>
				<input type="number" name="" id="CD" value="50.8" style="width:40% ;" placeholder="Chamfer Diameter"/>
				<label>HD</label>
				<input type="number" name="" id="HD" value="25.4" style="width:40% ;" placeholder="Hole Diameter"/>	
				<label>CA</label>
				<input type="number" name="" id="CA" value="90" style="width:40% ;" placeholder="Chamfer Angle"/>	
				<label>WD</label>
				<input type="number" name="" id="WD" value="20" style="width:40% ;" placeholder="Wire Diameter"/>		
			</div>
		<h5 class="mui-content-padded">或者你可以从预设中选择对应的Capillary</h5>
				<select id='capselect' class="mui-btn mui-btn-block" onchange="selectcap()">
					<option value="item-1">PECCS0-S23-164(CD2.0)</option>
					<option value="item-2">SPTCS0-S23-230(CD2.0)</option>
					<option value="item-3">SPTCS0-S23-204(CD1.6)</option>
					<option value="item-4">K&SCS0-S23-180(CD1.65)</option>
				</select>
			
			<h5 class="mui-content-padded" style="margin-top: 5%;">请输入线径(WD),焊球直径(MBD)以及焊球高度(MBH)</h5>
			<button id='emptyMBDMBH' class="mui-btn  mui-btn-blue" style="width: 100%;font-size: 13px;margin: 3px;">重置MBD/MBH</button>
			<div class="mui-input-row">
				<label>MBD</label>
				<input type="number" id="MBD" placeholder="焊球直径">
				<label>MBH</label>
				<input type="number" id='MBH' placeholder="焊球高度">
			</div>
			<div>
				<h5 class="mui-content-padded" style="color: blue;">理论的FAB直径为:</h5>
				<h4 id='fab1' style="color: blue;margin-left: 40%;float: left;">0</h4>
				<p >mil</p>
				<h4 id="fab2" style="color: blue;margin-left: 40%;float: left;">0</h4>
				<p style="">um</p>
			</div>
		<div>
			<button id="frommil" class="mui-btn  mui-btn-green" style="width: 46%;font-size: 17px;margin: 3px;">MBD/MBH是mil</button>
		<button id='fromum' class="mui-btn  mui-btn-green" style="width: 46%;font-size: 17px;margin: 3px;">MBD/MBH是um</button>
		</div>
		
		</div>
	</div>
	
	<script type="text/javascript">
	
		var calfrommil=document.getElementById('frommil').addEventListener('tap',function(){
			var dataMBD=document.getElementById('MBD').value;
			var dataMBH=document.getElementById('MBH').value;
			if(dataMBH.length>1&&dataMBD.length>1) {
			var dataCD=document.getElementById('CD').value;
			  var dataHD=document.getElementById('HD').value;
			  var dataCA=document.getElementById('CA').value;
			  var dataWD=document.getElementById('WD').value;
			  var umMBD=dataMBD*25.4;
			  var umMBH=dataMBH*25.4;
			  var x=1.5*dataHD*dataHD*(dataHD-dataWD);
			  var y=(dataCD*dataCD*dataCD-dataHD*dataHD*dataHD)/(4*Math.tan(dataCA/2));
			  var z=1.5*umMBD*umMBD*umMBH;
			  var i=x+y+z;
			  var fabum=Math.pow(i,1/3);
			  var fabmil=fabum/25.4;
			  document.getElementById('fab2').innerHTML=fabum.toPrecision(5);
			  document.getElementById('fab1').innerHTML=fabmil.toPrecision(5);
			} else {
				alert('请输入值！');
			}
		});
		
		var calfromum=document.getElementById('fromum').addEventListener('tap',function(){
			var dataMBD=document.getElementById('MBD').value;
			var dataMBH=document.getElementById('MBH').value;
			  if (dataMBD.length>1&&dataMBH.length>1){
			  	  var dataCD=document.getElementById('CD').value;
				  var dataHD=document.getElementById('HD').value;
				  var dataCA=document.getElementById('CA').value;
				  var dataWD=document.getElementById('WD').value;
				  var x=1.5*dataHD*dataHD*(dataHD-dataWD);
				  var y=(dataCD*dataCD*dataCD-dataHD*dataHD*dataHD)/(4*Math.tan(dataCA/2));
				  var z=1.5*dataMBD*dataMBD*dataMBH;
				  var i=x+y+z;
				  var fabum=Math.pow(i,1/3);
				  var fabmil=fabum/25.4;
				  document.getElementById('fab2').innerHTML=fabum.toPrecision(5);
				  document.getElementById('fab1').innerHTML=fabmil.toPrecision(5);
			  } else{
			  	alert('请输入值！');
			  }
		});
		
		var resetvalue=document.getElementById('emptyMBDMBH').addEventListener('tap',function(){
			document.getElementById('MBD').value=null;
			document.getElementById('MBH').value=null;
		});
		
		var exitwindow=document.getElementById('exit').addEventListener('tap',function(){
			plus.runtime.quit();
		});
		
		function selectcap (){
			var getcap=document.getElementById('capselect');
			var index=getcap.selectedIndex;
			switch(index){
				case 0:
					document.getElementById('CD').value=2*25.4;
					document.getElementById('HD').value=1.1*25.4;
					document.getElementById('CA').value=90;
					break;
				case 1:
					document.getElementById('CD').value=51;
					document.getElementById('HD').value=28;
					document.getElementById('CA').value=90;
					break;
				case 2:
					document.getElementById('CD').value=41;
					document.getElementById('HD').value=25;
					document.getElementById('CA').value=90;
					break;
				case 3:
					document.getElementById('CD').value=1.65*25.4;
					document.getElementById('HD').value=1.1*25.4;
					document.getElementById('CA').value=90;
					break;
		}
		}
		
	</script>
</body>
</html>